<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>PubMed检索结果</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container { max-width: 1000px; margin-top: 30px; }
        .literature-item { margin-bottom: 30px; padding: 20px; border: 1px solid #e9ecef; border-radius: 8px; }
        .literature-title { color: #0d6efd; text-decoration: none; }
        .literature-title:hover { text-decoration: underline; }
        .literature-meta { color: #6c757d; font-size: 0.9rem; }
        .abstract { margin-top: 10px; padding: 10px; background-color: #f8f9fa; border-radius: 5px; }
        .pagination { justify-content: center; margin-top: 40px; }
        .no-results { text-align: center; padding: 50px; color: #6c757d; }
    </style>
</head>
<body>
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>检索结果: <small class="text-muted" th:text="'\'' + ${query} + '\''"></small></h2>
            <a href="/" class="btn btn-outline-secondary">返回检索</a>
        </div>

        <div th:if="${literatures.isEmpty()}" class="no-results">
            <h3>未找到相关文献</h3>
            <p>请尝试其他检索词或调整检索条件</p>
        </div>

        <div th:unless="${literatures.isEmpty()}">
            <div th:each="literature : ${literatures}" class="literature-item">
                <h3><a th:href="'https://pubmed.ncbi.nlm.nih.gov/' + ${literature.pmid}" target="_blank" class="literature-title" th:text="${literature.title}"></a></h3>
                <div class="literature-meta">
                    <span th:text="${literature.authors}"></span> · 
                    <!-- <span th:text="${literature.journal}"></span> ·  -->
                    <span th:text="${literature.publicationDate}"></span>
                </div>
                <div class="abstract" th:if="${literature.abstractText}">
                    <strong>摘要:</strong>
                    <p th:text="${literature.abstractText}"></p>
                </div>
                <div th:unless="${literature.abstractText}" class="text-muted">
                    摘要不可用
                </div>
            </div>

            <nav aria-label="分页导航">
                <ul class="pagination">
                    <!-- 首页按钮 -->
                    <li class="page-item" th:classappend="${currentPage == 1} ? 'disabled' : ''">
                        <a class="page-link" th:href="@{/search(query=${query}, page=1)}">首页</a>
                    </li>
                    <!-- 上一页按钮 -->
                    <li class="page-item" th:classappend="${currentPage == 1} ? 'disabled' : ''">
                        <a class="page-link" th:href="@{/search(query=${query}, page=${currentPage - 1})}">上一页</a>
                    </li>
                    <!-- 显示前一页页码（如果不是第一页） -->
                    <li th:if="${currentPage > 1}" class="page-item">
                        <a class="page-link" th:href="@{/search(query=${query}, page=${currentPage - 1})}" th:text="${currentPage - 1}"></a>
                    </li>
                    <!-- 当前页码 -->
                    <li class="page-item active"><span class="page-link" th:text="${currentPage}"></span></li>
                    <!-- 显示后一页页码（如果不是最后一页） -->
                    <li th:if="${currentPage < totalPages}" class="page-item">
                        <a class="page-link" th:href="@{/search(query=${query}, page=${currentPage + 1})}" th:text="${currentPage + 1}"></a>
                    </li>
                    <!-- 下一页按钮 -->
                    <li class="page-item" th:classappend="${currentPage == totalPages} ? 'disabled' : ''">
                        <a class="page-link" th:href="@{/search(query=${query}, page=${currentPage + 1})}">下一页</a>
                    </li>
                    <!-- 末页按钮 -->
                    <li class="page-item" th:classappend="${currentPage == totalPages} ? 'disabled' : ''">
                        <a class="page-link" th:href="@{/search(query=${query}, page=${totalPages != null ? totalPages : 1})}">末页</a>
                    </li>
                    <!-- 页码输入跳转 -->
                    <li class="page-item d-flex align-items-center ms-3">
                        <input type="number" class="form-control form-control-sm w-20" id="pageInput" min="1" th:max="${totalPages}" th:placeholder="'1-' + ${totalPages}" style="min-width: 80px; padding-right: 0.05rem;">
                        <button class="btn btn-primary btn-sm ms-2" style="min-width: 40px; padding: 0.2rem 0.2rem; border-radius: 4px;" onclick="jumpToPage()">跳转</button>
                    </li>
                    <script>
                        function jumpToPage() {
                            const pageInput = document.getElementById('pageInput');
                            const page = parseInt(pageInput.value);
                            const totalPages = '[[${totalPages}]]' || 1;
                            const query = '[[${query}]]';
                            
                            if (page >= 1 && page <= totalPages) {
                                window.location.href = '/search?query=' + encodeURIComponent(query) + '&page=' + page;
                            } else {
                                alert('页码必须在 1 到 ' + totalPages + ' 之间');
                                pageInput.value = '[[${currentPage}]]';
                            }
                        }
                    </script>
                </ul>
            </nav>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>